<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rotate demo</title>

    <head>
        <style>
            body {
                margin: 30px;
                background-color: #E9E9E9;
            }
            
            div.polaroid {
                width: 294px;
                padding: 10px 10px 20px 10px;
                border: 1px solid #BFBFBF;
                background-color: white;
                /* Add box-shadow */
                box-shadow: 2px 2px 3px #aaaaaa;
            }
            
            div.rotate_left {
                float: left;
                -ms-transform: rotate(7deg);
                /* IE 9 */
                -moz-transform: rotate(7deg);
                /* Firefox */
                -webkit-transform: rotate(7deg);
                /* Safari and Chrome */
                -o-transform: rotate(7deg);
                /* Opera */
                transform: rotate(7deg);
            }
            
            div.rotate_right {
                float: left;
                -ms-transform: rotate(-8deg);
                /* IE 9 */
                -moz-transform: rotate(-8deg);
                /* Firefox */
                -webkit-transform: rotate(-8deg);
                /* Safari and Chrome */
                -o-transform: rotate(-8deg);
                /* Opera */
                transform: rotate(-8deg);
            }
        </style>
    </head>

    <body>

        <div class="polaroid rotate_left">
            <img src="/i/ballade_dream.jpg" alt="郁金香" width="284" height="213" />
            <p class="caption">上海鲜花港的郁金香，花名：Ballade Dream。</p>
        </div>

        <div class="polaroid rotate_right">
            <img src="/i/china_pavilion.jpg" alt="世博中国馆" width="284" height="213" />
            <p class="caption">2010年上海世博会，中国馆。</p>
        </div>


    </body>

</html>